<template>
  <div class="page-container">
    <div class="page-header">
      <div class="page-tile">
        <el-button
          class="icon-button back-button"
          style="margin-right: 10px"
          @click="$router.back()"
        >
          <i class="el-icon-arrow-left" style="font-size: 12px"></i>
        </el-button>
        <link-button
            :content="$t('route.versionLog')"
            @click="$router.back()"
          />
        <span>
          {{ "&nbsp;" +"/" + "&nbsp;" + $route.query.title }}
        </span>
      </div>
      <div class="left-wrapper"></div>
      <div class="right-wrapper"></div>
    </div>
    <el-scrollbar class="page-content">
      <div class="content-wrapper">
        <el-card>
          <basic-table
            ref="BasicTable"
            :pageMethod="(params) => {
              params.product_model = $route.query.product_model
              return $pandaApi.apiGetVersionsDetail(params);
            }"
          >
            <template #table-options="tableSlotData">
              <div class="table-left-options">
                <el-button type="primary" icon="el-icon-plus" class="icon-button setting-button" style="width: auto;" @click="addArticle">
                  <span style="font-size: 12px;">{{$t('common.Create')}}</span>
                </el-button>
                <el-button class="icon-button setting-button" icon="el-icon-delete" style="width: auto; margin-left: 10px;" @click="deleteVersionLog(tableSlotData.table.selectRows, true)" :disabled="tableSlotData.table.selectRows.length <= 0">
                  <span style="font-size: 12px;">{{$t('markdowns.batchDelete')}}</span>
                </el-button>
              </div>
            </template>
            <template #table-column="tableSlotData">
              <el-table-column type="selection" width="40" align="center"></el-table-column>
              <el-table-column
                prop="version_number"
                :label="$t('systemBack.version')">
              </el-table-column>
              <el-table-column
                prop="created_at"
                :label="$t('common.releaseTime')">
                <template slot-scope="scope">
                  {{ myParseTime(new Date(scope.row.created_at)) }}
                </template>
              </el-table-column>
              <el-table-column
                prop="action"
                width="200"
                :label="$t('common.action')">
                <template #default="props">
                  <link-button :content="$t('common.delete')" :size="10" :font-size="'12px'" style="margin-right:15px" @click="deleteVersionLog(props.row, false)"></link-button>
                  <link-button :content="$t('common.edit')" :size="10" :font-size="'12px'" style="margin-right:15px" @click="edit(props.row)"></link-button>
                  <link-button :content="$t('markdowns.detail')" :size="10" :font-size="'12px'" style="margin-right:15px" @click="detail(props.row)"></link-button>
                </template>
              </el-table-column>
            </template>
            <template #others-elements="tableSlotData">
              <!-- 创建 -->
              <create-article ref="createArticleProps" @success='success'></create-article>
              <!-- 删除 -->
              <delete-version ref="deleteVersion" :delete-method="(data) => $pandaApi.apiDeleteVersion(data).then(() => {
                $message.success($t('markdowns.deleteSuccess'))
                tableSlotData.table.deleteRefresh();
              }).catch(()=>{
                $message.warning($t('markdowns.deleteFail'))
                tableSlotData.table.deleteRefresh();
              })"></delete-version>
              <!-- 详情 -->
              <version-detail ref="versionDetail"></version-detail>
              <!-- 编辑 -->
              <version-edit ref="versionEdit" :patch-method="(id, data) => $pandaApi.apiEditVersion(id, data).then(() => {
                $message.success($t('markdowns.editSuccess'))
                tableSlotData.table.deleteRefresh();
              }).catch(()=>{
                $message.warning($t('markdowns.editFail'))
                tableSlotData.table.deleteRefresh();
              })"></version-edit>
            </template>
          </basic-table>
        </el-card>
      </div>
    </el-scrollbar>
  </div>
</template>
<script lang="ts">
import Vue from 'vue'
import BasicTable from '@/components/Basic/Table/BasicTable.vue'
import { AuthModule } from '@/store/modules/auth';
import createArticle from './components/createArticle.vue';
import LinkButton from '@/components/Basic/Button/LinkButton.vue';
import deleteVersion from './components/deleteVersion.vue';
import versionDetail from './components/versionDetail.vue';
import versionEdit from './components/versionEdit.vue';
import { parseTime } from '../../../utils';

export default Vue.extend({
  components: {
    BasicTable,
    createArticle,
    LinkButton,
    deleteVersion,
    versionDetail,
    versionEdit
  },
  computed: {
    AuthModule: () => AuthModule
  },
  data() {
    return {
      tableData:[],
      authrole: AuthModule.authrole,
      product_model: '',
    }
  },
  mounted() {
  },
  methods: {
    success() {
      (this as any).$refs.BasicTable.refresh();
    },
    myParseTime(s: any) {
      return parseTime(s, true);
    },

    addArticle() {
      (this as any).$refs['createArticleProps'].init()
    },
    deleteVersionLog(row: any, isBatch: any) {
      (this as any).$refs['deleteVersion'].init(row, isBatch)
    },
    detail(row: any) {
      (this as any).$refs['versionDetail'].init(row)
    },
    edit(row: any) {
        (this as any).$refs['versionEdit'].init(row)
    },
    batchRemove(data: any) {
        (this as any).$refs['deleteVersion'].init(data)
    }
  }
})
</script>
<style lang="scss" scoped>
.page-container {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #eff1f4;

  .page-header {
    height: 60px;
    background-color: #ffffff;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #d9d9d9;

    .page-tile {
      color: #031129;
      font-size: 16px;
      margin-left: 20px;
      display: flex;
      align-items: center;

      .back-button {
        width: 24px;
        height: 24px;
        padding: 0px 6px;
      }

      .iconzhongyiicon_gaojing {
        margin-left: 5px;
      }
    }
  }

  .page-content {
    height: calc(100vh - 110px);
    overflow: hidden;
    flex-grow: 1;

    .content-wrapper {
      padding: 15px;

      .content-info {
        margin-bottom: 20px;

        ::v-deep .el-form-item {
          margin-bottom: 0px;
          margin-right: 40px;
        }

        ::v-deep .el-form-item__label,
        ::v-deep .el-form-item__content {
          color: #999999;
          font-size: 12px;
        }

        ::v-deep .el-form-item__content {
          color: #333333;
        }
      }
    }
  }
}

.table-left-options {
  display: flex;
}

.table-right-options {
  display: flex;

  .setting-button {
    margin-right: 10px;
  }
}
</style>
